<script setup>
import { onMounted, onUpdated, ref } from 'vue'

console.log(document.querySelector('#myBox'));
// 测试多次代码执行, 模拟场景一个页面需要角色数据和公司数据两个接口来做功能
// 获取角色信息的各种功能
onMounted(() => {
    console.log(document.querySelector('#myBox'));
    console.log('挂载后执行, 模拟获取员工信息');
})

// 一大堆功能代码处理角色内容

// 上面是角色功能代码写完了

// 下面开始公司信息功能代码
onMounted(() => {
    // 这个生命周期可以在你需要的时候调用多次
    console.log('挂载后执行, 模拟获取公司信息');
})

// 测试更新生命周期
const count = ref(0)
const increment = () => {
    count.value++
}

onUpdated(()=>{
    console.log('更新后执行');
})
</script>

<template>
    <div id="myBox">
        {{count}}
        <button @click="increment">+1</button>
    </div>
</template>
  
<style lang="less">

</style>
  